/* =Widgets
----------------------------------------------- */

.widget {
}
/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}
/* Search widget */
#searchsubmit {
	display: none;
}

.textwidget p:first-child{
	margin-top:0;
}

.textwidget p:last-child{
	margin-bottom:0;
}

/* =General Widget Styling
----------------------------------------------- */

.widget {
	
	img,
	embed,
	iframe,
	object {
		max-width: 100%;
	}

	img {
		height: auto;
	}
	
	a.button {
		display:inline-block;
		padding: 10px 35px;

		.rounded(3px);

		text-decoration:none;
		color: white;
		text-shadow: 0 1px 0 rgba(0,0,0,05);

		.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)");

		.button-style(#505050, 6.5);

		&:hover {
			.button-style(lumlighten(#505050,1.25), 6.5);
		}

		&:active {
			.box-shadow(~"inset 0 -1px 0 rgba(255,255,255,0.2), inset 0 1px 0 rgba(0,0,0,0.05)");
			.button-style(lumdarken(#505050,1.25), -2);
		}
	}

	.button-container.align-center{
		text-align: center;
	}

	.button-container.align-left{
		text-align: left;
	}

	.button-container.align-right{
		text-align: right;
	}

	.button-container.align-full .button{
		display: block;
		text-align: center;
	}
}

.widget_call-to-action {
	position: relative;
	padding: 30px 40px;
	background: #444 url(images/patterns/cta.png);
	border: 1px solid #000;
	.box-shadow(0 2px 2px rgba(0,0,0,0.15));
	.rounded(3px);

	h2.cta-headline{
		font-size: 22px;
		margin:0 0 0.6em 0;
		color: #FFFFFF;
		line-height: 1.4em;
		text-shadow: 0 1px 2px #000;
	}

	p.cta-sub-text{
		font-size: 15px;
		font-family: "noto serif" serif;
		font-style: italic;
		margin:0;
		color: #CCC;
		line-height: 1.4em;
		text-shadow: 0 1px 2px #000;
	}

	a.button {
		position: absolute;
		top: 50%;
		right: 40px;
		margin-top: -23px; /* This should be half the height of the button */

		.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.2)");
	}
}

/* Responsive styles for the call to action widget */
@media (max-width:680px) {
	body.responsive .widget_call-to-action {
		a.button {
			position: static;
			margin-top: 25px;
			display:block;
			text-align:center;
		}
	}
}

.widget_siteorigin-list {
	ul {

		li {
			margin-bottom: 0.4em;
		}

		li:last-child {
			margin-bottom: 0;
		}
	}
}

.widget_headline {

	.widget-title{
		margin-bottom: 0;
		padding: 10px 0;

		span {
			display: block;
			line-height: 1.3em;
		}

		.size-medium {
			font-size: 130%;
		}

		.size-large {
			font-size: 160%;
		}

		.size-extra-large {
			font-size: 190%;
		}
		
		.align-left{
			text-align: left;
		}

		.align-center{
			text-align: center;
		}

		.align-right{
			text-align: right;
		}
	}
	
}

.widget_icon-text {
	font-size: 0.95em;
	text-align:center;

	.feature-icon {
		display: inline-block;
		line-height: 0;
	}

	.widget-title {
		margin: 15px 0;
	}
}

.widget_mega_title {
	text-align: center;
	font-size: 18px;

	h1{
		font-weight: bold;
		font-size: 425%;
		line-height: 1.25em;
		margin-bottom: 40px;
		color: #3e3e3e;
	}

	h2 {
		font-family: 'Noto Serif', serif;
		font-style: italic;
		font-size: 87.5%;
		padding: 35px;
		position: relative;
		color: #777777;
		line-height: 1.25em;

		.decoration {
			position: absolute;
			top: 0;
			left: 50%;
			height: 100%;
			@mega_title_subtitle_decoration_border_size: 144px;
			margin-left: (-@mega_title_subtitle_decoration_border_size/2);
			width: @mega_title_subtitle_decoration_border_size;
			border: 1px solid #DDD;
			border-width: 1px 0;

			pointer-events:none;
		}
	}
}

@media only screen and ( max-width: 680px ) {
	body.responsive .widget_mega_title {
		h1 {
			font-size: (425% * 0.75 );
		}

		h2 {
			font-size: (87.5% * 0.95);
		}
	}
}

@media only screen and ( max-width: 480px ) {
	body.responsive .widget_mega_title{
		h1 {
			font-size: (425% * 0.5 );
		}

		h2 {
			font-size: (87.5% * 0.9);
		}
	}
}

